<template>
  <div>
    <common-head title="分类"></common-head>

    <div class="con">
      <!-- 左边 介绍列表 -->
      <div class="c-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item, index) in cates" :key="item.id" :title=item.name @click="changeCate(index)" />
        </van-sidebar>
      </div>

      <!-- 右边分类 -->
      <div class="c-right">
        <!-- 分类具体内容 -->
        <div class="c-r-con" v-for="item in items" :key="item.id" @click="ToDetail(item.id)">
          <img v-lazy="item.pic" alt="">
          <div class="c-bttom">
            <p>
              {{item.name}}
            </p>
            <div class="evaluate">
              {{item.statusStr}}
            </div>
            <div class="price">
              <div class="pr-left">
                <span class="money">{{item.minPrice | currency}}</span>
                <span class="volume">10+评价</span>
              </div>
              <van-icon name="add" color="#f66" size="30" @click.stop="AddCart(item)" />
            </div>
          </div>
        </div>

      </div>

    </div>

    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import { getCates, getItemLists } from '@api'
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { currency } from '@filters'
import { Toast } from 'vant'
import { mapActions } from 'vuex'


export default {
  data () {
    return {
      activeKey: 0,
      cates: [],
      items: []
    };
  },
  created () {
    this.getAllCates()
  },
  methods: {
    // 获取全部分类
    getAllCates () {
      getCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetItemLists()
          /* 为什么不第一次调用在 created 里面？
          我们先解释为什么要 第一次调用：
          我们右边的商品详情是依赖于 有数据才做的，你要是不把数据获取过来，他指定不给你好脸色看，也就是一片红的报错，所以你在点击左侧
          的商品列表的时候，就需要传参、获取数据，得到数据后的右侧商品详情，才可以正常运转，所以需要第一次调用
          
          现在我们解释我们为什么需要在 这里调用：
          因为这个函数是异步的，你又想及时获取到数据，只有，在这里，也就是函数下面直接调用了*/
        }
      })
    },
    // 获取 商品列表  主要就是将点击那个商品分类的 id 传递给 商品列表
    fetItemLists () {
      getItemLists({
        categoryId: this.cates[this.activeKey].id
      }).then(res => {
          this.items = [] // 优化没有数据的时候，就不显示任何内容
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    // 点击切换商品信息
    changeCate (i) {
      this.activeKey = i // 将 左侧的商品的 索引号，赋值给 activeKey
      this.fetItemLists() // 这里再次调用是为了，每次点击 列表商品，让其id 传递过去，是的右侧函数一直在运转
      console.log(this.items);
    },
    // 点击加入购物车
     AddCart (item) {
      this.add_cart(item)
      // 初始化 加入商品 的 num 且 设置 加入商品后 ,复选框选中
      item.isChecked = true
      item.num = 1
      Toast('成功加入购物车')
    },
    // 点击商品去详情页面
    ToDetail(id){
      this.$router.push(`/detail/${id}`)
    },
    // 处理点击商品是直接加入购物车还是 ++
    ...mapActions('cart', ['add_cart'])
  },
  filters: {
    currency
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  .c-right {
    flex: 1;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .c-r-con {
      width: 45%;
      height: 200px;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 150px;
        border-radius: 5px 5px 0 0;
      }
      .c-bttom {
        box-sizing: border-box;
        padding: 0 5px;
        p {
          font-size: 14px;
          color: #333;
          font-weight: 550;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 20px;
        }
        .evaluate {
          width: 70px;
          height: 10px;
          font-size: 10px;
          text-align: center;
          line-height: 10px;
          border-radius: 2px;
          border: 1px solid #ffbb00;
          margin-top: 5px;
        }
        .price {
          margin: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .money {
            font-size: 16px;
            color: red;
            font-weight: 550;
          }
          .volume {
            margin-left: 5px;
            color: #777;
          }
        }
      }
    }
  }
}
</style>
